<template>
  <div class="aside">
   
     <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    :collapse="isShow"
    @open="handleOpen"
    @close="handleClose"
  >
   <h3 class="title">哈哈</h3>
    <el-sub-menu index="1">
      <template #title>
        <el-icon><location /></el-icon>
        <span>Navigator One</span>
      </template>
      <el-menu-item-group>
        <template #title><span>Group One</span></template>
        <el-menu-item index="1-1">item one</el-menu-item>
        <el-menu-item index="1-2">item two</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="Group Two">
        <el-menu-item index="1-3">item three</el-menu-item>
      </el-menu-item-group>
      <el-sub-menu index="1-4">
        <template #title><span>item four</span></template>
        <el-menu-item index="1-4-1">item one</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="2">
      <el-icon><location /></el-icon>
      <template #title>Navigator Two</template>
    </el-menu-item>
    <el-menu-item index="3" disabled>
      <el-icon><document /></el-icon>
      <template #title>Navigator Three</template>
    </el-menu-item>
    <el-menu-item index="4">
      <el-icon><setting /></el-icon>
      <template #title>Navigator Four</template>
    </el-menu-item>
  </el-menu>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch, onMounted, onUnmounted } from "vue";
//引入pinia
import {storeToRefs} from "pinia"
// 引入store
import { useHomeStore } from "@/stores/home";
const homeStore = useHomeStore();
const { isShow } = storeToRefs(homeStore);

//菜单点击事件
const handleClose = (key) => {
  console.log(`关闭${key}`);
};
const handleOpen = (key) => {
  console.log(`打开${key}`);
};
//菜单项点击事件
const itemClick = (index) => {
  console.log(`菜单项被点击`,index);
};


//示例代码
const state = reactive({
  count: 0,
});
const count = ref(0);
const doubleCount = computed(() => count.value * 2);

const increment = () => {
  console.log("函数定义示例");
};
watch(count, (newValue, oldValue) => {
  console.log(`watch监听: oldValue to newValue`);
});

onMounted(() => {});
onUnmounted(() => {});
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
  text-align: center;
}
.aside {
  .title{
    color: #fff;
    margin-top: 10px;
  }
}
/* 样式穿透 */
:deep(.el-sub-menu__title ) {
  color: #bbbdbe !important;
}
:deep(.el-menu-item ) {
  color: #cacbcf !important;
}
:deep(.el-menu-item.is-active) {
  /* color: #2d8cf0 !important; */
  background-color:blue !important;
}
:deep(.el-menu) {
  background-color: #02223f;
  /* 去掉边框 */
  border: none;
}
:deep(.el-sub-menu__title:hover) {
  color: #ce2323 !important;
  background-color: #02223f;
}
:deep(.el-menu-item:hover) {
  /* color:#FFF !important; */
  background-color: #02223f;
}

</style>
